<template>
  <div class="lee-search-main">
    <div class="lee-search-checkbox">
      <input type="checkbox" id="search-checkbox" />
      <label for="search-checkbox">我创建的</label>
    </div>
    <div class="lee-search-tags">
      <span class="iconfont iconshuqian"></span>
      <span>全部标签</span>
      <span class="iconfont iconbottom"></span>
    </div>
    <div class="lee-search-input">
      <span class="iconfont iconfangdajing"></span>
      <input
        type="text"
        placeholder="搜索"
        v-model="searchText"
        @focus="onFocus"
        @blur="onBlur"
      />
      <span
        class="iconfont iconclose1"
        v-show="showTags || searchText.length > 0"
      ></span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const showTags = ref(false);
const searchText = ref("");

const onFocus = () => {
  showTags.value = true;
};

const onBlur = () => {
  showTags.value = false;
};
</script>
<style lang="scss" scoped>
@use "@/assets/css/lee.scss" as lee;
.lee-search-main {
  @extend .lee-flex-align-center;

  .lee-search-checkbox {
    @extend .lee-flex-align-center;
    color: lee.$color-font-black-2;
    input[type="checkbox"] {
      appearance: none;
      width: 16px;
      height: 16px;
      border: 1px solid lee.$color-border-checkbox;
      border-radius: 4px;
      margin-right: 0.5rem;
      position: relative;
      cursor: pointer;
      background-color: #ffffff;

      &:hover {
        border-color: lee.$color-border-checkbox-hover;
        border-radius: 4px;
      }

      &:checked::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 1px;
        width: 4px;
        height: 8px;
        border: solid lee.$color-border;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      &:checked {
        background-color: #409eff;
        border-color: #409eff;
      }
    }
    label {
      margin-right: 0.5rem;
      cursor: pointer;
      font-size: 14px;
    }
  }
  .lee-search-tags {
    @extend .lee-flex-align-center;
    padding: 0 8px;
    justify-content: space-between;
    font-size: 13px;
    color: lee.$color-font-black-2;
    border-radius: lee.$size-border-radius-8;
    background-color: lee.$color-background-gray-1-hover;
    width: 110px;
    height: 32px;
    margin: 0 8px;
    cursor: pointer;

    .iconfont {
      font-size: 14px;
    }
  }
  .lee-search-input {
    @extend .lee-flex-align-center;
    position: relative;
    color: lee.$color-font-black-2;
    .iconfont {
      font-size: 13px;
    }
    .iconfont:first-child {
      position: absolute;
      left: 8px;
    }
    .iconfont:last-child {
      position: absolute;
      right: 8px;
      color: lee.$color-iconfont-gray-1;
      cursor: pointer;
      &:hover {
        color: lee.$color-iconfont-gray-1-hover;
      }
    }
    input {
      border: 1px solid transparent;
      border-radius: lee.$size-border-radius-8;
      height: 32px;
      padding: 0 25px;
      box-sizing: border-box;
      background-color: lee.$color-background-gray-1-hover;

      &:focus {
        border-color: lee.$color-border;
        background-color: lee.$color-background-white-1;
        outline: none;
      }
    }
  }
}
</style>
